W12_Bootstrap 筆記

1. Bootstrap 簡介

FE201_四處可見的 UI library：Bootstrap_Bootstrap 簡介

1. Bootstrap 就是幫你寫好的 CSS + JS

2. 引進 bootstrap，去官網把 link 貼在 head 標籤裡面

3. aria- 是給無障礙網頁設計用的 （Accessibility）

4. 如果要引入 dropdown menu 要引入 js，通常放在 body 標籤裡面最下面

5. funtional CSS 也太酷了吧！

CSS 檢測網站

邪魔歪道還是苦口良藥？Functional CSS 經驗分享

遇到的困難：

• 怎樣都無法用 jQuery，是半天發現原因是引入錯連結了，照著做也會錯，自己挖的坑好大，但也是笑笑就過了

2. Bootstrap 的網格系統

FE201_四處可見的 UI library：Bootstrap_Bootstrap 的網格系統

1. 參考資料

2. col-數字：這是最小的尺寸

• col-sm- / col-md- / col-lg- / col-xl-

1. 還有 offset 的用法：偏移幾格，然後佔幾格：

• .col-md-3 .offset-md-3

3. 初探 Bootstrap 元件

FE201_四處可見的 UI library：Bootstrap_初探 Bootstrap 元件

1. 官方網站裡面資料很豐富，可以看一下裡面的 component 跟其他東西，有個印象

4. 實作 todo list with Bootstrap

FE201_四處可見的 UI library：Bootstrap_Bootstrap 實戰

1. 用 bootstrap 刻一個留言板

5. 總結 Bootstrap

FE201_四處可見的 UI library：Bootstrap_總結 Bootstrap

推薦 Bootstrap 模板網站 Bootswatch